<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js"><span id='global-property-'>/**
</span> * @ignore
 * common render for node
 * @author yiminghe@gmail.com
 */
KISSY.add(&quot;tree/node-render&quot;, function (S, Node, Container, TreeNodeTpl, ContentRenderExtension) {
    var SELECTED_CLS = &quot;selected&quot;,
        COMMON_EXPAND_EL_CLS = &quot;expand-icon-{t}&quot;,
        EXPAND_ICON_EL_FILE_CLS = [
            COMMON_EXPAND_EL_CLS
        ].join(&quot; &quot;),
        EXPAND_ICON_EL_FOLDER_EXPAND_CLS = [
            COMMON_EXPAND_EL_CLS + &quot;minus&quot;
        ].join(&quot; &quot;),
        EXPAND_ICON_EL_FOLDER_COLLAPSE_CLS = [
            COMMON_EXPAND_EL_CLS + &quot;plus&quot;
        ].join(&quot; &quot;),
        ICON_EL_FILE_CLS = [
            &quot;file-icon&quot;
        ].join(&quot; &quot;),
        ICON_EL_FOLDER_EXPAND_CLS = [
            &quot;expanded-folder-icon&quot;
        ].join(&quot; &quot;),
        ICON_EL_FOLDER_COLLAPSE_CLS = [
            &quot;collapsed-folder-icon&quot;
        ].join(&quot; &quot;),
        ROW_EL_CLS = 'row',
        CHILDREN_CLS = &quot;children&quot;,
        CHILDREN_CLS_L = &quot;lchildren&quot;,
        CHECK_CLS = &quot;checked&quot;,
        ALL_STATES_CLS = &quot;checked0 checked1 checked2&quot;;

    return Container.getDefaultRender().extend([ContentRenderExtension], {

        beforeCreateDom: function (renderData, childrenElSelectors) {
            S.mix(renderData.elAttrs, {
                role: 'tree-node',
                'aria-labelledby': 'ks-content' + renderData.id,
                'aria-expanded': renderData.expanded ? 'true' : 'false',
                'aria-selected': renderData.selected ? 'true' : 'false',
                'aria-level': renderData.depth,
                'title': renderData.tooltip
            });
            S.mix(childrenElSelectors, {
                expandIconEl: '#ks-tree-node-expand-icon-{id}',
                rowEl: '#ks-tree-node-row-{id}',
                iconEl: '#ks-tree-node-icon-{id}',
                childrenEl: '#ks-tree-node-children-{id}',
                checkIconEl: '#ks-tree-node-checked-{id}'
            });
        },

        refreshCss: function (isNodeSingleOrLast, isNodeLeaf) {
            var self = this,
                control = self.control,
                iconEl = control.get(&quot;iconEl&quot;),
                iconElCss,
                expandElCss,
                expandIconEl = control.get(&quot;expandIconEl&quot;),
                childrenEl = control.get(&quot;childrenEl&quot;);

            if (isNodeLeaf) {
                iconElCss = ICON_EL_FILE_CLS;
                expandElCss = EXPAND_ICON_EL_FILE_CLS;
            } else {
                var expanded = control.get(&quot;expanded&quot;);
                if (expanded) {
                    iconElCss = ICON_EL_FOLDER_EXPAND_CLS;
                    expandElCss = EXPAND_ICON_EL_FOLDER_EXPAND_CLS;
                } else {
                    iconElCss = ICON_EL_FOLDER_COLLAPSE_CLS;
                    expandElCss = EXPAND_ICON_EL_FOLDER_COLLAPSE_CLS;
                }
            }

            iconEl[0].className = self.getBaseCssClasses(iconElCss);
            expandIconEl[0].className = self.getBaseCssClasses(
                S.substitute(expandElCss, {
                    &quot;t&quot;: isNodeSingleOrLast ? &quot;l&quot; : &quot;t&quot;
                })
            );
            childrenEl[0].className =
                self.getBaseCssClasses((isNodeSingleOrLast ?
                    CHILDREN_CLS_L : CHILDREN_CLS));
        },

        _onSetExpanded: function (v) {
            var self = this,
                childrenEl = self.control.get(&quot;childrenEl&quot;);
            childrenEl[v ? &quot;show&quot; : &quot;hide&quot;]();
            self.el.setAttribute(&quot;aria-expanded&quot;, v);
        },

        _onSetSelected: function (v) {
            var self = this,
                rowEl = self.control.get(&quot;rowEl&quot;);
            rowEl[v ? &quot;addClass&quot; : &quot;removeClass&quot;](self.getBaseCssClasses(SELECTED_CLS));
            self.el.setAttribute(&quot;aria-selected&quot;, v);
        },

        '_onSetDepth': function (v) {
            this.el.setAttribute(&quot;aria-level&quot;, v);
        },

        _onSetCheckState: function (s) {
            var self = this,
                checkCls = self.getBaseCssClasses(CHECK_CLS).split(/\s+/).join(s + ' ') + s,
                checkIconEl = self.control.get(&quot;checkIconEl&quot;);
            checkIconEl.removeClass(self.getBaseCssClasses(ALL_STATES_CLS))
                .addClass(checkCls);
        },

        getChildrenContainerEl: function () {
            return this.control.get('childrenEl');
        }
    }, {
        ATTRS: {
            contentTpl: {
                value: TreeNodeTpl
            }
        },

        HTML_PARSER: {
            rowEl: function (el) {
                return el.one('.' + this.getBaseCssClass(ROW_EL_CLS))
            },
            childrenEl: function (el) {
                return el.one(&quot;.&quot; + this.getBaseCssClass(CHILDREN_CLS));
            },
            isLeaf: function (el) {
                var self = this;
                if (el.hasClass(self.getBaseCssClass(&quot;leaf&quot;))) {
                    return true;
                } else if (el.hasClass(self.getBaseCssClass(&quot;folder&quot;))) {
                    return false;
                }
                return undefined;
            },
            expanded: function (el) {
                return el.one(&quot;.&quot; + this.getBaseCssClass(CHILDREN_CLS))
                    .css(&quot;display&quot;) != &quot;none&quot;;
            },
            expandIconEl: function (el) {
                return el.one('.' + this.getBaseCssClass('expand-icon'));
            },
            checkState: function (el) {
                var checkIconEl = el.one('.' + this.getBaseCssClass(CHECK_CLS));
                if (checkIconEl) {
                    var allStates = ALL_STATES_CLS.split(/\s+/);
                    for (var i = 0; i &lt; allStates.length; i++) {
                        if (checkIconEl.hasClass(this.getBaseCssClass(allStates[i]))) {
                            return i;
                        }
                    }
                }
                return 0;
            },
            iconEl: function (el) {
                return el.one('.' + this.getBaseCssClass('icon'));
            },
            checkIconEl: function (el) {
                return el.one('.' + this.getBaseCssClass(CHECK_CLS));
            }
        }

    });

}, {
    requires: ['node', 'component/container', './node-xtpl', 'component/extension/content-render']
});</pre>
</body>
</html>
